$white:  #fff;
$gray-100: #EEF0F3;
$gray-200: #D8DBDF;
$gray-300: #B8BCC4;
$gray-400: #A7ACBA;
$gray-500: #878C9A;
$gray-600: #777C8C;
$gray-700: #5A6073;
$gray-800: #454A5B;
$gray-900: #252830;
$custom-gray: lighten($gray-900, 7%);
$black:  #000;

$blue:    #03a9f4;
$dark-blue:    #0d5aa7;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #e83e8c;
$red:     #f33628;
$orange:  #ff9800;
$yellow:  #ffc107;
$green:   #4caf50;
$teal:    rgb(209, 228, 231);
$cyan:    #17a2b8;

$colors: (
  blue: $blue,
  indigo: $indigo,
  purple: $purple,
  pink: $pink,
  red: $red,
  orange: $orange,
  yellow: $yellow,
  green: $green,
  teal: $teal,
  cyan: $cyan,
  white: $white,
  gray: $gray-600,
  gray-dark: $gray-900,
  custom-gray: $custom-gray,
);

$theme-colors: (
  primary: $blue,
  secondary: $gray-600,
  custom: $custom-gray,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-900,
  purple: $purple,
  pink: $pink,
  orange: $orange,
  indigo: $indigo,
  teal: $teal
);

$body-bg:       $gray-900;
$body-color:    $gray-300;
$line-height-base:            1.5 !default;

$font-size-base:              1rem;
$font-size-lg:                ($font-size-base * 1.25);
$font-size-sm:                ($font-size-base * .875);
$font-size-xs:   .75rem;

$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            700;

$grid-gutter-width: 0;

$border-radius-xs:       .1rem;
$component-active-color:      $white;
$component-active-bg:    $custom-gray;

$hr-border-color: lighten($gray-900, 2%);

$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x-xs:               .3rem;
$input-btn-padding-y-xs:               .1rem;
$input-btn-line-height-xs:              1.25;
$input-btn-line-height:       $line-height-base !default;


$input-btn-focus-box-shadow:           none;
$input-box-shadow:           none;
$btn-focus-box-shadow:           none;
$btn-active-box-shadow:          none;
$custom-select-focus-box-shadow: none;

$btn-border-radius:              0;
$btn-border-radius-xs:           $border-radius-xs;
$input-bg:                       $custom-gray;
$input-line-height:              $input-btn-line-height !default;
$input-disabled-bg:              $custom-gray;
$input-color:                    $gray-200;
$input-border-color:             transparent;
$input-border-radius:            0;
$input-focus-border-color:       $gray-800;
$input-focus-color:              $gray-100;
$input-placeholder-color:        $gray-500;
$input-group-addon-bg:           transparent;
$input-padding-y:                       $input-btn-padding-y !default;
$custom-select-bg:               $custom-gray;
$custom-select-indicator-color: $gray-600;
$custom-select-border-radius: 0;
$custom-select-focus-border-color: $gray-800;
$custom-select-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2});
$nav-tabs-border-color:                       lighten($gray-900, 2%);

$nav-tabs-border-radius:                      0;
$nav-tabs-link-active-color:                  $custom-gray;
$nav-tabs-link-active-bg:                     $component-active-bg;

$nav-pills-border-radius:     0;

$custom-control-indicator-bg: $custom-gray;

$modal-content-bg: lighten($gray-900, 2%);
$modal-content-border-color: lighten($gray-900, 4%);
$modal-content-box-shadow-xs: none;
$modal-content-box-shadow-sm-up: none;
$modal-backdrop-opacity: .8;
$modal-header-border-color: lighten($gray-900, 4%);

$tooltip-color: $gray-200;
$tooltip-bg: darken($gray-900, 8%);

$text-muted:                  $gray-500;

$code-color:                  $blue;

$dropdown-padding-y:                0;
$dropdown-color:                    $gray-300;
$dropdown-bg:                       $input-bg;
$dropdown-border-color:             $gray-800;
$dropdown-border-radius:            0;
$dropdown-box-shadow:               none;
$dropdown-link-color:               $gray-300;
$dropdown-link-hover-color:         $component-active-color;
$dropdown-link-hover-bg:            lighten($component-active-bg, 2%);$dropdown-link-active-color:        $component-active-color;
$dropdown-link-active-bg:           lighten($component-active-bg, 2%);
$dropdown-item-padding-y:           5px;
$dropdown-item-padding-x:           10px;

$toast-color:                       $gray-100;
$toast-border-radius:               .4rem;
$toast-padding-x:                   .4rem;
$toast-padding-y:                   .25rem;
